//
@function px( $px ){
    @return $px/$designWidth*120 + rem;
}
// 1920 是设计稿的宽度，你要根据设计稿的宽度填写。如果设计师的设计稿宽度不统一，就杀死设计师，换个新的。
$designWidth : 1920;


body{
    font-family: "PingFang SC", Arial, "Microsoft YaHei", sans-serif;
}


.text-gray{
    color:#999;
}
a,a:hover,a:active,a:visited{
    color:#24282E;
    text-decoration: none;
}

.scroll-y{
    overflow-y: scroll;
}
.scroll-x{
    overflow-x: scroll;
    white-space: nowrap;
}
.overflow-hidden{
    overflow: hidden;
}
.bold{
    font-weight: 700;
}
.regular{
    font-weight: 600;
}
.lighter{
    font-weight: 400;
}
/* 阴影效果 */
.box-shadow-1{
    box-shadow: 0px 0px px(15) 0px rgba(0, 0, 0, 0.12);
}
/**圆角**/
.round{
    border-radius: 5000px;
}

.line-1{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.line-3{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}
.line-2{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*上下边框*/
.border-top{
    border-top: 1px solid #f2f2f2;
}
.border-bottom{
    border-bottom: 1px solid #f2f2f2;
}
/*隐藏滚动条*/
::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
}
/* display */
.hide{
    display: none!important;
}
.inline{
    display: inline-block;vertical-align: top;
}
.inline-flex{
    display: inline-flex;vertical-align: top;
}
.space-center{
    justify-content: space-between;
    items-align:center;
}
.u-text-center{
    text-align: center;
}
.u-text-right{
    text-align: right;
}
.text-666{
    color:#666666;
}
/* 字体颜色或背景色 */
.text-red{//嫣红
    color: #EF2E2E;
}
.bg-red{
    background-color: #EF2E2E;color: #fff;
}
.text-green{//森绿
    color: #39b54a;
}
.bg-green{
    background-color: #39b54a;
}
.text-blue{//海蓝
    color:#3477F8;
}
.link{
    color:#6185A5!important;
}
input:focus{
    outline:none;
}
.text-orange{
    color:#FF6911;
}
.bg-blue{
    background-color: #3477F8;color: #fff;
}
.text-cyan{//天青
    color: #13A9AB;
}
.bg-cyan{
    background-color:#13A9AB;color: #fff;
}
.text-purple{//姹紫
    color: #6739b6;
}
.bg-purple{
    background-color: #6739b6;
}
.text-gray{//灰色
    color: #999999;
}
.bg-gray{
    background-color: #999999;color: #fff;
}
.text-white{
    color: #fff;
}
.bg-white{
    background-color: #fff;
}
.page-title{
    color:#05A7A9;
    font-size:px(22);
}
.uflex{
    display: flex;
}
.flex-between{
    justify-content: space-between;
    align-items: center;
}
.flex-end{
    justify-content: flex-end;
    align-items: center;
}
.flex-center{
    justify-content: center;
    align-items: center;
}
.flex-start{
    justify-content: flex-start;
    align-items: flex-start;
}
.flex-bottom{
    justify-content: flex-start;
    align-items: flex-end;
}
.u-text-left{
    text-align: left;
}
.flex-column{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}
.flex-center{
    align-items: center;
    justify-content: center;
}
@for $i from 10 through 30 {
    // 字体 只要能被5除尽的数
    .font-#{$i}{
        font-size: px($i);
    }
}
@for $i from 0 through 30 {
    // 圆角 只要能被5除尽的数
    @if $i % 5 == 0 {
        // 得出：radius-0或者radius-30
        .radius-#{$i}{
            border-radius: px($i)!important;
        }
    }
}
// 定义flex等分
@for $i from 0 through 12 {
    .u-flex-#{$i} {
        flex: $i;
    }
}


// 定义内外边距，历遍1-80
@for $i from 0 through 80 {
    // 只要双数和能被5除尽的数
    @if $i % 5 == 0 {
        // 得出：u-margin-30或者u-m-30
        .u-margin-#{$i}, .u-m-#{$i} {
            margin: px($i)!important;
        }

        // 得出：u-padding-30或者u-p-30
        .u-padding-#{$i}, .u-p-#{$i} {
            padding: px($i)!important;
        }

        @each $short, $long in l left, t top, r right, b bottom {
            // 缩写版，结果如： u-m-l-30
            // 定义外边距
            .u-m-#{$short}-#{$i} {
                margin-#{$long}: px($i)!important;
            }

            // 定义内边距
            .u-p-#{$short}-#{$i} {
                padding-#{$long}: px($i)!important;
            }

            // 完整版，结果如：u-margin-left-30
            // 定义外边距
            .u-margin-#{$long}-#{$i} {
                margin-#{$long}: px($i)!important;
            }

            // 定义内边距
            .u-padding-#{$long}-#{$i} {
                padding-#{$long}: px($i)!important;
            }
        }
    }
}
